

window.onload=function()
{
    document.onselectstart=new Function('event.returnValue=false;');
    $( "#main" ).draggable({ containment: 'parent' ,drag: setChoice});
    var rightDiv=document.getElementById("right");
    var mainDiv=document.getElementById("main");
    var upDiv=document.getElementById("up");
    var leftDiv=document.getElementById("left");
    var leftUpDiv=document.getElementById("left-up");
    var rightUpDiv=document.getElementById("right-up");
    var rightDownDiv=document.getElementById("right-down");
    var leftDownDiv=document.getElementById("left-down");
    var downDiv=document.getElementById("down")
    var contact="";//定义被按下的触点
    var ifKeyDown=false;
    //鼠标按下事件
    rightDiv.onmousedown=function(e)
    {
        e.stopPropagation();
        ifKeyDown=true;
        contact="right";
    }
     upDiv.onmousedown=function(e)
    {
        e.stopPropagation();
        ifKeyDown=true;
        contact="up";
    }
      leftDiv.onmousedown=function(e)
    {
        e.stopPropagation();
        ifKeyDown=true;
        contact="left";
    }
       downDiv.onmousedown=function(e)
    {
        e.stopPropagation();
        ifKeyDown=true;
        contact="down";
    }
     leftUpDiv.onmousedown=function(e)
    {
        e.stopPropagation();
        ifKeyDown=true;
        contact="left-up";
    }
      leftDownDiv.onmousedown=function(e)
    {
        e.stopPropagation();
        ifKeyDown=true;
        contact="left-down";
    }
       rightDownDiv.onmousedown=function(e)
    {
        e.stopPropagation();
        ifKeyDown=true;
        contact="right-down";
    }
        rightUpDiv.onmousedown=function(e)
    {
        e.stopPropagation();
        ifKeyDown=true;
        contact="right-up";
    }
    //鼠标松开事件
    window.onmouseup=function(e)
    {
        ifKeyDown=false;
    }
    //鼠标移动事件
    window.onmousemove=function(e)
    {
        if(ifKeyDown==true)
        {
        switch(contact)
            {
                case "right":setRight(e);break;
                case "left":setLeft(e);break;
                case "up":setUp(e);break;
                case "down":setDown(e);break;
                case "left-up":setLeft(e); setUp(e);break;
                case "right-up":setRight(e); setUp(e);break;
                case "right-down":setRight(e) ;setDown(e);break;
                case "left-down":setLeft(e); setDown(e);break;
            }
        }
         setChoice();
         setPreview();
    }
   
    //right事件
    function setRight(e)
    {
        var x=e.clientX;//鼠标X坐标
        var addWidth=""//鼠标移动后选取框增加宽度
        var widthBefore=mainDiv.offsetWidth-2;//选取框未变化之前宽度
        addWidth=x-getPosition(mainDiv).left-widthBefore;
        mainDiv.style.width=widthBefore+addWidth+"px";
     }
    function setLeft(e)
    {
        var x=e.clientX;
        var mainX=getPosition(mainDiv).left;
        var addWidth=mainX-x;
        var widthBefore=mainDiv.offsetWidth-2;
        mainDiv.style.width=widthBefore+addWidth+"px";
        mainDiv.style.left=mainDiv.offsetLeft-addWidth+"px";
    }
    function setUp(e)
    {
        var y=e.clientY//鼠标Y坐标
        var heightBefore=mainDiv.offsetHeight-2;//未变化之前选取框高度
        var addHeight=getPosition(mainDiv).top-y;//增加高度
        mainDiv.style.height=heightBefore+addHeight+"px";//增加之后选取框高度
        mainDiv.style.top=mainDiv.offsetTop-addHeight+"px";//选取框变化之后纵坐标
    }
    function setDown(e)
    {
        var y=e.clientY;
        var heightBefore=mainDiv.offsetHeight-2;
        var addHeight=y-getPosition(mainDiv).top-heightBefore;
        mainDiv.style.height=heightBefore+addHeight+"px";
    }
        //获取元素相对于屏幕左边的距离和上边的距离，利用offsetLeft和offsetTop
    function getPosition(node)
    {
        var left=node.offsetLeft;
        var parent=node.offsetParent;
        var top=node.offsetTop;
        {
            while(parent!=null)
            {
                left+=parent.offsetLeft;
                top+=parent.offsetTop;
                parent=parent.offsetParent;
            }
        }
        return {"left":left,"top":top};
    }
    //
    function setChoice()
    {
        var top=mainDiv.offsetTop;
        var left=mainDiv.offsetLeft;
        var right=mainDiv.offsetLeft+mainDiv.offsetWidth;
        var bottom=mainDiv.offsetHeight+mainDiv.offsetTop;
        var img2=document.getElementById("img2");
        img2.style.clip="rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
    }
    function setPreview()
    {
		var top = mainDiv.offsetTop;
		var right = mainDiv.offsetLeft+mainDiv.offsetWidth;
		var bottom = mainDiv.offsetTop+mainDiv.offsetHeight;
		var left = mainDiv.offsetLeft;
		var img3 = document.getElementById("img3");
		img3.style.top = -top+"px";
		img3.style.left = -left+"px";
		img3.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";	
    }

}


